<template>
  <div class="class-b">
    <el-button @click="tree=true" >打开树</el-button>
    <div class="class-c">
      <vue-ps-tree
      :ref='"demo"+index'
        v-for="(treeComp, index) in treeCompArrays"
        :key="'ps'+index"
        :tree-comp-data="treeComp"
        @onTreeCheck="onCheck"
        @onTreeClick="onClick"
        @onTreeCollapse="onCollapse"
        @onTreeDblClick="onDblClick"
        @onTreeDrag="onDrag"
        @onTreeDragMove="onDragMove"
        @onTreeDrop="onDrop"
        @onTreeExpand="onExpand"
        @onTreeMouseDown="onMouseDown"
        @onTreeMouseUp="onMouseUp"
        @onTreeRightClick="onRemove"
        @beforeRemove="beforeRemove"
        @createRightMenu="createRightMenu"
        @onRename="onRename"
      />
      <el-button @click="getSelectNodes">dsafa</el-button>
      <ps-tree-select
        v-for="(treeSelect,index) in treeSelectArrays"
        :key="'select'+index"
        :tree-comp-data="treeSelect"
      />
    </div>
    <vxe-modal v-model="tr" width="80vw" height="80vh">
      <!-- <form ref='form' method="post" enctype="multipart/form-data"> -->
        <input ref='fileinput'  type='file'/>
      <!-- </form> -->
      <vxe-button  @click="tijiao" >提交</vxe-button>
    </vxe-modal>
    <vxe-modal v-model='tree' resize width="400" height="600">
       <ps-tree :tree-comp-data="treecomp_tree"/>
    </vxe-modal>
  </div>
</template>

<script>
import VuePsTree from '@/components/psTree/vuePsTree'
import PsTreeSelect from '@/components/psTree/PsTreeSelect';
import psTree from '@/components/psTree/psTree'
import {getRealUrl,syncRequest,fileUpload} from "@/utils/httpRequet"
import request from "@/utils/requestutil"
import axios from 'axios'
export default {
  components: {
    PsTreeSelect,
    VuePsTree,psTree
  },
  data() {
    return {
      tr:false,
      tree:false,
      treecomp_tree:{
        treeConfigKey:'TC_CLS_TREE',
        treeBuildConfig:{
          dealTreaparam:this.dealTreaparam,
          datafilter:this.datafilter
        }
      },
      treeSelectArrays: [
        {
          name: 'demo3',
          treeData: [
            { id: 1, pId: 0, name: '[core] 基本功能 演示', open: false },
            { id: 101, pId: 1, name: '最简单的树 --  标准 JSON 数据', isDisabled: true },
            { id: 102, pId: 1, name: '最简单的树 --  简单 JSON 数据', isDisabled: true },
            { id: 103, pId: 1, name: '不显示 连接线' },
            { id: 104, pId: 1, name: '不显示 节点 图标' },
            { id: 105, pId: 1, name: '自定义图标 --  icon 属性' },
            { id: 106, pId: 1, name: '自定义图标 --  iconSkin 属性' },
            { id: 107, pId: 106, name: '自定义字体' },
            { id: 115, pId: 106, name: '超链接演示' },
            { id: 108, pId: 106, name: '异步加载 节点数据' },
            { id: 109, pId: 106, name: '用 zTree 方法 异步加载 节点数据' },
            { id: 110, pId: 106, name: '用 zTree 方法 更新 节点数据' },
            { id: 111, pId: 1, name: '单击 节点 控制' },
            { id: 112, pId: 1, name: '展开 / 折叠 父节点 控制' },
            { id: 113, pId: 1, name: '根据 参数 查找 节点' },
            { id: 114, pId: 1, name: '其他 鼠标 事件监听' }
          ],
          treeBuildConfig: {
            options: {
              data: {
                // 设置图标库(采用iconfont class形式)
                iconMap: {
                  0: 'icon-all',
                  1: 'icon-bussiness-man',
                  2: 'icon-code'
                },
                // 设置对应每个节点的节点类型，与数据中customType属性对应
                key: {
                  nodeType: 'iconKey'
                },
                simpleData: {
                  enable: true,
                  idKey: 'id',
                  pIdKey: 'pid',
                  rootPId: 0
                }
              },
              view: {
                // 开启图标显示功能
                showIcon: false
              },
              check: {
                /**
                 *   Y 属性定义 checkbox 被勾选后的情况；
                 *   N 属性定义 checkbox 取消勾选后的情况；
                 *   "p" 表示操作会影响父级节点；
                 *   "s" 表示操作会影响子级节点。
                 *   请注意大小写，不要改变
                 */
                chkboxType: { 'Y': 'ps', 'N': 's' },
                enable: true
              }
            },
            converData: [
              {
                enable: true,
                idKey: 'id',
                pIdKey: 'pId',
                value: 'name'
              }
            ],
            treeConfigKey: '',
            dataUrl: {
              url: '',
              params: {}
            },
            checkType: 'radio-all',
            isEdit: true,
            isDrag: false,
            editShowType: 2,
            settings: {
              multiple: true,
              clearable: true,
              searchable: true, // 是否支持索引
              sortValueBy: '',
              disabled: false
            }
          }
        },
        {
          name: 'demo4',
          treeData: [
            { id: 1, pId: 0, name: '[core] 基本功能 演示', open: false },
            { id: 101, pId: 1, name: '最简单的树 --  标准 JSON 数据', isDisabled: true },
            { id: 102, pId: 1, name: '最简单的树 --  简单 JSON 数据', isDisabled: true },
            { id: 103, pId: 1, name: '不显示 连接线' },
            { id: 104, pId: 1, name: '不显示 节点 图标' },
            { id: 105, pId: 1, name: '自定义图标 --  icon 属性' },
            { id: 106, pId: 1, name: '自定义图标 --  iconSkin 属性' },
            { id: 107, pId: 106, name: '自定义字体' },
            { id: 115, pId: 106, name: '超链接演示' },
            { id: 108, pId: 106, name: '异步加载 节点数据' },
            { id: 109, pId: 106, name: '用 zTree 方法 异步加载 节点数据' },
            { id: 110, pId: 106, name: '用 zTree 方法 更新 节点数据' },
            { id: 111, pId: 1, name: '单击 节点 控制' },
            { id: 112, pId: 1, name: '展开 / 折叠 父节点 控制' },
            { id: 113, pId: 1, name: '根据 参数 查找 节点' },
            { id: 114, pId: 1, name: '其他 鼠标 事件监听' }
          ],
          treeBuildConfig: {
            treeBuildConfig: {
              options: {
                data: {
                  // 设置图标库(采用iconfont class形式)
                  iconMap: {
                    0: 'icon-all',
                    1: 'icon-bussiness-man',
                    2: 'icon-code'
                  },
                  // 设置对应每个节点的节点类型，与数据中customType属性对应
                  key: {
                    nodeType: 'iconKey'
                  },
                  simpleData: {
                    enable: true,
                    idKey: 'id',
                    pIdKey: 'pid',
                    rootPId: 0
                  }
                },
                view: {
                  // 开启图标显示功能
                  showIcon: false
                },
                check: {
                  /**
                   *
                   *   Y 属性定义 checkbox 被勾选后的情况；
                   N 属性定义 checkbox 取消勾选后的情况；
                   "p" 表示操作会影响父级节点；
                   "s" 表示操作会影响子级节点。
                   请注意大小写，不要改变
                   */
                  chkboxType: { 'Y': 'ps', 'N': 'ps' },
                  enable: true
                }
              },
              converData: [
                {
                  enable: true,
                  idKey: 'id',
                  pIdKey: 'pId',
                  value: 'name'
                }
              ],
              treeConfigKey: '',
              dataUrl: {
                url: '',
                params: {}
              },
              checkType: 'radio-all',
              isEdit: true,
              isDrag: false,
              editShowType: 2,
              settings: {
                multiple: true,
                clearable: true,
                searchable: true, // 是否支持索引
                sortValueBy: '',
                disabled: false
              }
            }
          }
        }],
      treeCompArrays: [
        {
          name: 'demo1', // 填写标注
          treeData: [
            { id: 1, pId: 0, name: '[core] 基本功能 演示', open: false },
            { id: 101, pId: 1, name: '最简单的树 --  标准 JSON 数据', iconKey: 0 },
            { id: 102, pId: 1, name: '最简单的树 --  简单 JSON 数据', iconKey: 1 },
            { id: 104, pId: 1, name: '不显示 节点 图标', iconKey: 2 },
            { id: 105, pId: 1, name: '自定义图标 --  icon 属性', iconKey: 1 },
            { id: 106, pId: 1, name: '自定义图标 --  iconSkin 属性', iconKey: 1 },
            { id: 107, pId: 106, name: '自定义字体', iconKey: 0 },
            { id: 115, pId: 106, name: '超链接演示', iconKey: 3 },
            { id: 108, pId: 106, name: '异步加载 节点数据', iconKey: 2 },
            { id: 109, pId: 106, name: '用 zTree 方法 异步加载 节点数据', iconKey: 1 },
            { id: 110, pId: 106, name: '用 zTree 方法 更新 节点数据', iconKey: 1 },
            { id: 111, pId: 1, name: '单击 节点 控制', iconKey: 1 },
            { id: 112, pId: 1, name: '展开 / 折叠 父节点 控制', iconKey: 0 },
            { id: 113, pId: 1, name: '根据 参数 查找 节点', iconKey: 0 },
            { id: 114, pId: 1, name: '其他 鼠标 事件监听', iconKey: 0 }
          ],
          treeBuildConfig: {
            options: {

            },
            treeConfigKey: '',
            checkType: 'radio-all',
            isEdit: true,
            isDrag: false,
            editShowType: 2,
            settings: {
              multiple: true,
              clearable: true,
              searchable: true, // 是否支持索引
              sortValueBy: ''
            // disabled:true
            }
          }
        },
        {
          name: 'demo2', // 填写标注
          treeData: [
            { id: 1, pId: 0, name: '[core] 基本功能 演示', open: false },
            { id: 101, pId: 1, name: '最简单的树 --  标准 JSON 数据', iconKey: 0 },
            { id: 102, pId: 1, name: '最简单的树 --  简单 JSON 数据', iconKey: 1 },
            { id: 103, pId: 1, name: '不显示 连接线', iconKey: 2 },
            { id: 104, pId: 1, name: '不显示 节点 图标', iconKey: 2 },
            { id: 105, pId: 104, name: '禁止拖动', iconKey: 1, drag: false },
            { id: 106, pId: 104, name: '禁止拖动', iconKey: 1, drag: false },
            { id: 107, pId: 104, name: '禁止子节点移走 2', iconKey: 0, childOuter: false },
            { id: 115, pId: 107, name: '我不想成为父节点 2-1', iconKey: 3, dropInner: false },
            { id: 108, pId: 107, name: '异步加载 节点数据', iconKey: 2 },
            { id: 109, pId: 107, name: '我不要成为根节点 2-2', iconKey: 1, dropRoot: false },
            { id: 110, pId: 1, name: '用 zTree 方法 更新 节点数据', iconKey: 1 },
            { id: 111, pId: 1, name: '单击 节点 控制', iconKey: 1 },
            { id: 112, pId: 1, name: '展开 / 折叠 父节点 控制', iconKey: 0 },
            { id: 113, pId: 1, name: '根据 参数 查找 节点', iconKey: 0 },
            { id: 114, pId: 1, name: '其他 鼠标 事件监听', iconKey: 0 }
          ],
          treeBuildConfig: {
            options: {
              data: {
              // 设置图标库(采用iconfont class形式)
                iconMap: {
                  0: 'icon-all',
                  1: 'icon-bussiness-man',
                  2: 'icon-code'
                },
                // 设置对应每个节点的节点类型，与数据中customType属性对应
                key: {
                  nodeType: 'iconKey'
                },
                simpleData: {
                  enable: true,
                  idKey: 'id',
                  pIdKey: 'pId',
                  rootPId: 0
                }
              },
              view: {
              // 开启图标显示功能
                showIcon: false
              },
              check: {
                /**
                 *
                 *   Y 属性定义 checkbox 被勾选后的情况；
                 N 属性定义 checkbox 取消勾选后的情况；
                 "p" 表示操作会影响父级节点；
                 "s" 表示操作会影响子级节点。
                 请注意大小写，不要改变
                 */
                chkboxType: { 'Y': 'ps', 'N': 'ps' },
                enable: true
              }
            },
            treeConfigKey: '',
            checkType: 'check',
            isEdit: true,
            isDrag: true,
            editShowType: 1,
            settings: {
              multiple: true,
              clearable: true,
              searchable: true, // 是否支持索引
              sortValueBy: ''
            // disabled:true
            }
          }
        }
      ]
    }
  },
  created() {
  },
  methods: {
    datafilter(treeid,pnode,resdata){
        if(resdata && resdata.data&& resdata.data.length>0){
          let _val=t.value?t.value.split(","):[];
          let resault=[];
          t.$_.forEach(resdata.data,(item,i)=>{
            // item.name=item.text;
            // item.pid=item.fid;
            // item.isParent=true;
              if(item.leaf=='0')item.isParent=true
              else if(item.leaf=='1' && this.searchtext){
                if(item.name.indexOf(this.searchtext)==-1)return;
              }
            resault.push(item);
          })
        }else{
          if(pnode)
          pnode.isParent=false;
        }
          return resault;
    },
    dealTreaparam(treeid,node){
      if(node==undefined){
        return {p0:'root',p1:'1'}
      }else{
        return {p0:node.id,p1:'1'};
      }
    },
    tijiao(){
      let url="http://localhost:8954/zzbhr/report/DealUnitService?method=readFile";//&token= b5eacb8eb13a048f11885b7bada210c789f4bc0c70cf89c8&_SID= 738c763df0ad44f58e21f756a8434809"
     // url=getRealUrl(url,true);
      let data=new FormData();
      data.append("file",this.$refs.fileinput.files[0]);
      fileUpload(url,data).then(res=>{
        console.log(res)
      })
// axios({
//   url:url,
//   data:data,
//   method:'post',
//   headers:{'Content-Type':'multipart/form-data'},
// })
      this.$refs.form.action=url;
    //  this.$refs.form.submit();
    },
    getSelectNodes(){
      this.$refs.demo1[0].getCheckedNodes();
      window.dem2=this.$refs.demo1
    },
    createRightMenu: function(params) {
      // console.log('父亲页面createRightMenu')
      var obj = {
        label: '自定义节点' + params.title,
        onClick: () => {
          // console.log('你好讨厌')
        }
      }
      params.items.push(obj)
      // params.items = [obj]
    },
    handleCreated: function(ztreeObj) {
      // console.log('ztreeObj', ztreeObj)
    },
    onClick: function(event, treeId, treeNode) {
      // console.log('父组件onClick:', event, treeId, treeNode)
    },
    onCheck: function(event, treeId, treeNode) {
      // console.log('父组件onCheck:', event, treeId, treeNode)
    },
    // 1. 每次折叠节点后， 弹出该节点的 tId、name 的信息
    onCollapse: function(event, treeId, treeNode) {
      // console.log('父组件onCollapse:', event, treeId, treeNode)
    },
    // 1. 每次鼠标双击后， 弹出鼠标所在节点的 tId、name 的信息
    onDblClick: function(event, treeId, treeNode) {
      // console.log('父组件onDblClick:', event, treeId, treeNode)
    },
    // 1. 每次开始进行拖拽节点后， 弹出被拖拽节点的个数信息
    onDrag: function(event, treeId, treeNodes) {
      // console.log('父组件onDrag:', event, treeId, treeNodes)
    },
    // 1. 拖拽节点时，随时输出 当前拖拽到的目标 DOM
    onDragMove: function(event, treeId, treeNodes) {
      // console.log('父组件onDragMove:', event, treeId, treeNodes)
    },
    // 1. 每次拖拽操作结束后， 弹出该被拖拽节点的个数以及目标节点的 tId、name 的信息
    onDrop: function(event, treeId, treeNodes, targetNode, moveType) {
      // console.log('父组件onDrop:', event, treeId, treeNodes, targetNode, moveType)
    },
    // 1. 每次展开节点后， 弹出该节点的 tId、name 的信息
    onExpand: function(event, treeId, treeNode) {
      // console.log('父组件onExpand:', event, treeId, treeNode)
    },
    // 1. 每次鼠标按键按下后， 弹出鼠标所在节点的 tId、name 的信息
    onMouseDown: function(event, treeId, treeNode) {
      // console.log('父组件onMouseDown:', event, treeId, treeNode)
    },
    // 1. 每次鼠标按键松开后， 弹出鼠标所在节点的 tId、name 的信息
    onMouseUp: function(event, treeId, treeNode) {
      // console.log('父组件onMouseUp:', event, treeId, treeNode)
    },
    // 1.删除节点时，弹出被删除的节点的 tId 以及 name 信息
    onRemove: function(event, treeId, treeNode) {
      // console.log('父组件onRemove:', event, treeId, treeNode)
    },
    // 1. 修改名称后，弹出被修改名称的节点的 tId 以及 name 信息
    onRename: function(event, treeId, treeNode, isCancel) {
      // console.log('父组件onRename:', event, treeId, treeNode)
    },
    beforeRemove: function(treeId, treeNode) {
      // console.log('父组件beforeRemove:', treeId, treeNode)
    }
  }
}
</script>

<style scoped>

</style>
